<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" title="任务评价" />
    <div class="kaohe-cycle">
      <span>考核周期：</span>
      <span>{{ assessmentCycle }}</span>
    </div>
    <evaluate-menu ref="evaluateMenu" :taskId="id" @getEvalResult="dealEvalChainInfo"></evaluate-menu>

    <!-- 主办单位 -->
    <div class="eval-unit" v-if="mainOrgs.length">
      <!-- <div class="eval-name">主办单位({{ mainOrgs.length }}) :</div> -->
      <evaluate-row
        v-for="(org, index) in mainOrgs"
        :key="org.id"
        :org="org"
        @clickScore="onSelectScore($event, 1, index)">
        <van-field
          v-show="org.showInput"
          v-model="org.evaluationDescInput"
          slot="inputDesc"
          autosize
          type="textarea"
          placeholder="等次为“一般”、“较差”时，需要说明原因。"
          rows="2"
          maxlength="200"
          show-word-limit />
      </evaluate-row>
      <evaluate-row
        v-for="(org, index) in subOrgs"
        :key="org.id"
        :org="org"
        @clickScore="onSelectScore($event, 2, index)">
        <van-field
          v-show="org.showInput"
          v-model="org.evaluationDescInput"
          slot="inputDesc"
          autosize
          type="textarea"
          placeholder="等次为“一般”、“较差”时，需要说明原因。"
          rows="2"
          maxlength="200"
          show-word-limit />
      </evaluate-row>
    </div>
    <!-- 协办单位 -->
    <!-- <div class="eval-unit" v-if="subOrgs.length">
      <div class="eval-name">协办单位({{ subOrgs.length }}) :</div>
      <evaluate-row
        v-for="(org, index) in subOrgs"
        :key="org.id"
        :org="org"
        @clickScore="onSelectScore($event, 2, index)">
        <van-field
          v-show="org.showInput"
          v-model="org.evaluationDescInput"
          slot="inputDesc"
          autosize
          type="textarea"
          placeholder="等次为“一般”、“较差”时，需要说明原因。"
          rows="2"
          maxlength="200"
          show-word-limit />
      </evaluate-row>
    </div> -->
    <van-empty description="暂无数据" v-if="totalListNum === 0" />
    <div class="btn-group" v-if="totalListNum !== 0">
      <van-button round block color="#004db6" @click="sbumit" :disabled="disabledSubmitBtn || !submitBtnCan">
        保 存
      </van-button>
    </div>
  </div>
</template>
<script>
import { updateEvaluateInfo } from '@api/api-task.js'
import EvaluateMenu from '../components/EvaluateMenu.vue'
import EvaluateRow from '../components/EvaluateRow.vue'
export default {
  name: 'EvaluateTask',
  components: { EvaluateMenu, EvaluateRow },
  data() {
    return {
      id: this.$route.query.id,
      assessmentCycle: decodeURIComponent(this.$route.query.assessmentCycle),
      mainOrgs: [], // 主办统计
      subOrgs: [], // 协办统计
      submitBtnCan: false, // 根据是否全部打分完成判断
      disabledSubmitBtn: false, // 根据状态启用禁用
      nperId: '',
    }
  },
  computed: {
    totalListNum() {
      return this.mainOrgs.length + this.subOrgs.length
    },
  },
  mounted() {
    this.initdata()
  },
  methods: {
    initdata() {
      this.$refs.evaluateMenu.initEvalCycleNper()
    },
    dealEvalChainInfo(data) {
      // console.log(data)
      const {
        id = '',
        evaluationState = '',
        leaderEvaluationDetailVOS = [],
        coEvaluationDetailVOS = [],
        nperId = '',
      } = data
      this.nperId = nperId // 评价周期id
      if (!data || JSON.stringify(data) === '{}') {
        this.mainOrgs = []
        this.subOrgs = []
        return
      }
      this.evalChainInfoId = id
      if (evaluationState === '1') {
        this.disabledSubmitBtn = false
      } else {
        this.disabledSubmitBtn = true
      }

      const mainOrgs = leaderEvaluationDetailVOS || []
      const subOrgs = coEvaluationDetailVOS || []

      this.mainOrgs = mainOrgs
        .map(item => {
          this.$set(item, 'evaluationDescInput', item.evaluationDesc)
          if (['3', '4'].includes(item.evaluationResult) && !item.evaluationDescInput) {
            this.$set(item, 'showInput', true)
          } else {
            this.$set(item, 'showInput', false)
          }
          return item
        })
        .concat()
      this.subOrgs = subOrgs
        .map(item => {
          this.$set(item, 'evaluationDescInput', item.evaluationDesc)
          this.$set(item, 'showInput', false)
          if (['3', '4'].includes(item.evaluationResult) && !item.evaluationDescInput) {
            this.$set(item, 'showInput', true)
          } else {
            this.$set(item, 'showInput', false)
          }
          return item
        })
        .concat()
    },
    /* 点击评分 */
    onSelectScore(data, type, inx) {
      const { score = {} } = data
      this.selectScore(score.id, type, inx)
    },
    /* 处理点击的评分 */
    selectScore(id, type, inx, disabled) {
      // if (disabled) return
      let list = []
      let orgStr = ''
      if (type === 1) {
        orgStr = 'mainOrgs'
        list = this.mainOrgs.concat()
      } else {
        orgStr = 'subOrgs'
        list = this.subOrgs.concat()
      }
      if (['3', '4'].includes(id)) {
        list[inx].showInput = true
      } else {
        list[inx].showInput = false
      }
      list[inx].evaluationResult = id
      this[orgStr] = list.concat()

      this.disabledSubmit()
      /* const orgId = list[inx].orgId
      this.scoreOrg[orgId] = id
      console.log(this.scoreOrg) */
    },
    /* 禁用提交 */
    disabledSubmit() {
      let totalNum = 0
      const orgs = [...this.mainOrgs, ...this.subOrgs]
      orgs.forEach(item => {
        if (item.evaluationResult) {
          totalNum++
        }
      })
      this.submitBtnCan = orgs.length === totalNum
    },
    /* 提交数据 */
    async sbumit(type) {
      if (this.disabledSubmitBtn) return
      const params = this.setData(type)
      // console.log(params)
      const noneDescArr = params.filter(item => item.showInput && !item.evaluationDescInput)
      // console.log(noneDescArr)
      if (noneDescArr.length) {
        this.$toast.fail('原因不能为空')
        return
      }
      const { code = 0, msg = '' } = await updateEvaluateInfo(params)
      if (code === 0) {
        this.$toast.success(msg)
        this.goback()
      }
    },
    /* 获取评价参数 */
    setData(type) {
      const list = []
      const orgsList = [...this.mainOrgs, ...this.subOrgs]
      orgsList.forEach(item => {
        if (item.evaluationResult) {
          let evaluationDesc = ''
          if (['3', '4'].includes(item.evaluationResult)) {
            if (item.showInput) {
              evaluationDesc = item.evaluationDescInput
            } else {
              evaluationDesc = item.evaluationDesc
            }
          }
          list.push({
            cycleNperId: item.cycleNperId || this.nperId,
            evaluationObjId: item.evaluationObjId,
            evaluationObjName: item.evaluationObjName,
            evaluationDesc: evaluationDesc,
            evaluationObjType: item.evaluationObjType,
            evaluationResult: item.evaluationResult,
            evaluationState: '2',
            evaluationUserId: item.evaluationUserId,
            id: item.id || '',
            taskId: this.id,
            // 额外增加参数
            showInput: item.showInput,
            evaluationDescInput: item.evaluationDescInput,
          })
        }
      })
      return list
    },
    /* 返回上一页 */
    goback() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.page_padding {
  background: #f7f7f7;
}
.kaohe-cycle {
  background: #fff;
  font-size: $fontSize30;
  padding: px2rem(20) px2rem(30);
}
.van-notice-bar {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.van-notice-bar--wrapable {
  padding: 8px 16px;
}

.eval-unit {
  background: #fff;
  margin-top: px2rem(20);
  padding: px2rem(30) px2rem(20);
  .eval-name {
    font-size: $fontSize30;
    position: relative;
    padding-left: px2rem(15);
    font-weight: 600;
    &::after {
      content: '';
      width: 3px;
      height: 20px;
      background: #d81e06;
      position: absolute;
      top: px2rem(12);
      left: 0;
    }
  }
}
.btn-group {
  margin: px2rem(30);
}
.van-cell {
  padding: 10px 16px;
}
</style>
